<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改问卷')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-questionnaire-edit" th:object="${questionnaire}">
            <h4 class="form-header h4">问卷信息</h4>
            <input name="questionnaireId" th:field="*{questionnaireId}" type="hidden">
            <input name="categoryId" class="form-control" type="hidden" id="treeId">
            <div class="row">
            	<div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label is-required">问卷名称：</label>
                        <div class="col-xs-10">
                            <input name="questionnaireName" th:field="*{questionnaireName}" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            	<div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">问卷分类：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
					            <input onclick="selectCategoryTree()" class="form-control" id="treeName" type="text" placeholder="请选择归分类" th:field="${category.categoryName}" readonly required>
					            <span class="input-group-addon"><i class="fa fa-search"></i></span>
					        </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">是否显示题号：</label>
                        <div class="col-sm-8">
                            <label class="toggle-switch switch-solid">
		                        <input type="checkbox" id=isShowNo th:checked="${questionnaire.isShowNo == '0' ? true : false}">
		                        <span></span>
		                    </label>
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">问卷题目信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="delColumn()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="table_question"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    
    <th:block th:include="include :: footer" />
    <script th:src="@{/js/jquery.tmpl.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "qa/questionnaire";
        $("#form-questionnaire-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
            	var data = $("#form-questionnaire-edit").serializeArray();
            	var isShowNo = $("input[id='isShowNo']").is(':checked') == true ? 0 : 1;
            	data.push({"name": "isShowNo", "value": isShowNo});
            	data.push({"name": "isPublish", "value": 1});
                $.operate.saveTab(prefix + "/edit", data);
            }
        }
        
        /* 问卷管理-新增-选择分类树 */
        function selectCategoryTree() {
			var options = {
                title: '分类选择',
                width: "380",
                url: ctx + "qa/category/selectCategoryTree/" + $("#treeId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
		}
		
		function doSubmit(index, layero){
			//var tree = layero.find("iframe")[0].contentWindow.$._tree;
			var body = layer.getChildFrame('body', index);
   			$("#treeId").val(body.find('#treeId').val());
   			$("#treeName").val(body.find('#treeName').val());
   			layer.close(index);
		}

		$(function() {
            var options = {
            	id: 'table_question',
            	uniqueId: "index",
            	data: [[${questionnaire.questionnaireQuestionsList}]],
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    title: "序号",
                    visible: false,
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'questionsIndex',
                    align: 'center',
                    width: '50px',
                    title: "题号",
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='questionnaireQuestionsList[%s].questionsIndex' value='%s'>", index,$.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'questionsType',
                    align: 'center',
                    title: '题型',
                    width: '98px',
                    formatter: function(value, row, index) {
                        var data = [{ index: index, type: value }];
		                return $("#questionsTypeTpl").tmpl(data).html();
                    }
                },
                {
                    field: 'title',
                    align: 'center',
                    title: '题目',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='questionnaireQuestionsList[%s].title' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'totalScore',
                    align: 'center',
                    title: '分值',
                    width: '80px',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='questionnaireQuestionsList[%s].totalScore' value='%s' readonly ><input type='hidden' name='questionnaireQuestionsList[%s].showType' value='%s'><input type='hidden' name='questionnaireQuestionsList[%s].showStyle' value='%s'><input type='hidden' name='questionnaireQuestionsList[%s].isShowTitle' value='%s'><input type='hidden' name='questionnaireQuestionsList[%s].answer' value='%s'><input type='hidden' name='questionnaireQuestionsList[%s].titleGroup' value='%s'>", 
                        		index, value,index,row.showType,index,row.showStyle,index,row.isShowTitle,index,row.answer,index,row.titleGroup);
                        return html;
                    }
                },
                {
                	field: 'ed',
                    align: 'center',
                    title: '编辑',
                    width: '70px',
                    formatter: function(value, row, index) {
                    	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs" href="javascript:editQuestions('+index +')"><i class="fa fa-edit"></i>编辑</a> ');
						return actions.join('');
                    }
                
                }]
            };
            $.table.init(options);
        });

        function addColumn() {
        	
        	var count = $("#table_question").bootstrapTable('getData').length;
        	
            $("#table_question").bootstrapTable('insertRow', {
            	index: count,
                row: {
                	index: $.table.serialNumber(count),
                    questionsIndex: $.table.serialNumber(count),
                    title: "",
                    totalScore: 0,
                    questionsType: "01",
                    showType: "01",
                    showStyle: "01",
                    isShowTitle: "0",
                    titleGroup: "",
                    answer: "",
                    ed:""
        	    }
            });
            
            //
            var answer = $("#table_question").bootstrapTable('getData');
            var answerStr = JSON.stringify(answer);
            //alert(answerStr)
        }
        
        function delColumn(){
        	var ids = $.table.selectColumns("index");
        	if (ids.length == 0) {
    			$.modal.alertWarning("请至少选择一条记录");
    			return;
    		}
        	$("#table_question").bootstrapTable('remove', {
        	    field: 'index',
        	    values: ids
        	})
        }
        
		function editQuestions(index){
			var options = {
                title: '编辑问题',
                width: "820",
                url: prefix + "/editQuestionAnswer/" + index,
                callBack: doAnswerSubmit
            };
            $.modal.openOptions(options);
        }
		
		function doAnswerSubmit(index,layero){
			var body = layer.getChildFrame('body', index);
			
   			var answerIndex = body.find('#answerIndex').val();
   			$("input[name='questionnaireQuestionsList["+answerIndex+"].showStyle']").val(body.find('#showStyle').val())
   			$("input[name='questionnaireQuestionsList["+answerIndex+"].showType']").val(body.find('#showType').val())
   			$("input[name='questionnaireQuestionsList["+answerIndex+"].isShowTitle']").val(body.find('#isShowTitle').val())
   			$("input[name='questionnaireQuestionsList["+answerIndex+"].titleGroup']").val(body.find('#titleGroup').val())
 			
   			layer.close(index);
		}
		
    </script>
</body>
</html>

<!-- 题型 -->
<script id="questionsTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='questionnaireQuestionsList[${index}].questionsType'>
    <option value="01" {{if type==="01"}}selected{{/if}}>单选题</option>
	<option value="02" {{if type==="02"}}selected{{/if}}>单选组</option>
	<option value="03" {{if type==="03"}}selected{{/if}}>判断题</option>
    <option value="04" {{if type==="04"}}selected{{/if}}>判断组</option>
    <option value="11" {{if type==="11"}}selected{{/if}}>复选题</option>    
    <option value="21" {{if type==="21"}}selected{{/if}}>填空题</option>
</select>
</div>
</script>